{include file="common/header-top" /}

<style>
    .van-grid-item__text{
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .job-item{
        display: block;
        margin-top: 5px;
    }

    .job-item-a{
        color: #2f2d33;
    }

    .job-item .job-item-img-icon {
        margin-top: 28px;
        padding-left: 10px;
    }

    .job-item .job-item-title{
        margin: 8px 0px 5px 2px;
        color: #3c3c3c;
        text-overflow: ellipsis;
        font-size: 15px;
        font-weight: 600;
        -webkit-line-clamp: 2;
    }
    .job-item .job-item-icon{
        font-size: small;
    }
    .job-item .job-item-span{
        color: #949595;
        font-weight: 500;
        font-size: 12px;
        padding-left: 5px;
    }
    .job-item .job-item-span-unit{
        font-size: 14px;
        color: #fcc48d;
    }

    .job-item .job-item-money-div{
        margin-top: 45px;
        float: right;
        margin-right: 5px;
    }


    .job-item .van-cell{
        padding: 0;
    }

    .job-item .van-cell:not(:last-child)::after{
        border-bottom: 0;
    }


</style>


<div id='app' v-cloak>

    <van-nav-bar title="发布豆记录" left-arrow @click-left="goBack" left-text="返回">
    </van-nav-bar>


    <van-tabs v-model="currentTab" swipeable @click="changeTab">
        <van-tab title="购买记录" name="1"></van-tab>
        <van-tab title="消耗记录" name="2"></van-tab>
    </van-tabs>


    <!--岗位列表-->
    <van-row>
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="getBeanRecordList"
        >
            <van-row v-for="item in beanList" class="job-item">
                <a href="#" class="job-item-a">
                    <van-col span="5">
                        <van-icon
                                :name="getIcon(item)"
                                class="job-item-img-icon" size="45px"
                        ></van-icon>
                    </van-col>

                    <van-col span="19">
                        <van-col span="24">
                            <h4 class="job-item-title" style="display: inline-block">
                                <div class="van-ellipsis" v-html="showTitle(item)"></div>
                            </h4>
                            <van-tag type="warning" mark style="float: right; margin-right: 5%;">{{showStatusText(item)}}</van-tag>
                        </van-col>
                        <van-row>

                            <van-col span="16" v-if="showGet(item)">
                                <van-cell
                                        title="充值金额"
                                        :value="item.recharge_money + ' 元'"
                                >
                                </van-cell>
                                <van-cell
                                        title="兑换汇豆"
                                        :value="item.publish_bean + ' 个'"
                                ></van-cell>
                                <van-cell
                                        title="赠送汇豆"
                                        :value="item.give_publish_bean + ' 个'"
                                >
                                </van-cell>
                                <van-cell
                                        title="时间"
                                        :value="item.buyTime"
                                >
                                </van-cell>
                            </van-col>


                            <van-col span="16" v-if="showConsumption(item)">
                                <van-cell
                                        title="消耗汇豆"
                                        :value="item.publish_bean + ' 个'"
                                ></van-cell>
                                <van-cell
                                        title="时间"
                                        :value="item.buyTime"
                                >
                                </van-cell>
                            </van-col>




                            <van-col span="8" style="text-align: right;">
                                <van-button @click.stop.prevent="cancelCharge(item)" type="danger" size="small" v-if="canCancel(item)">取消充值</van-button>
                                <van-button @click.stop.prevent="payCharge(item)" type="primary" size="small" v-if="canPay(item)">立即支付</van-button>
                            </van-col>
                        </van-row>
                    </van-col>

                    <van-col span="24">
                        <van-divider style="margin: 3px 0;"></van-divider>
                    </van-col>
                </a>
            </van-row>


        </van-list>
    </van-row>
    <!--岗位列表-->




    {include file="common/foot-bar" /}

</div>


<script>

    Vue.use(vant.Lazyload);


    var vm = new Vue({
        el: '#app',
        data() {
            return {
                active:3,
                userCenterIcon: {
                    normal: '/__FRONT__/images/icon/usercenter-n.png',
                    active: '/__FRONT__/images/icon/usercenter-a.png'
                },
                erShouIcon: {
                    normal: '/__FRONT__/images/icon/ershou-n.png',
                    active: '/__FRONT__/images/icon/ershou-a.png'
                },


                //当前列表类型
                currentType: '{$type}',
                currentTab: '{$type}',
                page: 1,
                pageSize: 8,


                //充值列表集
                beanList: [],
                loading: false,
                finished: false


            };
        },

        created(){
        },

        computed:{
        },

        methods:{
            //返回上一页
            goBack(){
                history.back();
            },

            showTitle(item){
                return item.kindCh;
            },

            showStatusText(item){
                if (item.statusCh) {
                    return item.statusCh;
                }
                return '已完成';
            },

            //显示图标
            getIcon(item){
                if (item.type == 1) {
                    return '/__FRONT__/images/icon/bean-add.png';
                }
                if (item.type == 2) {
                    return '/__FRONT__/images/icon/bean-reduce.png';
                }
            },

            //显示增加
            showGet(item){
                if (item.type == 1) {
                    return true;
                }
                return false;
            },
            //显示消耗
            showConsumption(item){
                if (item.type == 2) {
                    return true;
                }
                return false;
            },

            //支付
            canPay(item){
                return ((item.payStatus == 0) && item.charge_id) ? true : false;
            },
            payCharge(item){
                window.location.href = '/index/Userwallet/wechatPay?chargeId=' + item.charge_id;
            },



            //取消付款 -- 取消充值记录
            canCancel(item){
                return (item.payStatus == 0 && item.charge_id) ? true :false;
            },
            cancelCharge(item){
                var postData = {
                    id: item.charge_id
                };
                axiosRequest.post('/api/user/cancelRechargeBean', postData).then(function (response) {
                    if (response.code == 200) {
                        vm.$data.beanList.forEach(function (one, index) {
                            if (one.charge_id == response.data.chargeId) {
                                one.payStatus = response.data.status;
                                one.statusCh = response.data.statusCh;
                            }
                        });
                        vant.Toast('操作成功！');
                    } else {
                        vant.Toast('系统开小差啦！');
                    }
                });
            },



            //切换tab
            changeTab(name, title){
                this.currentType = name;
                this.beanList = [];
                this.page = 1;
                this.pageSize = 8;
                this.loading = true;
                this.finished = false;
                this.getBeanRecordList();
            },
            //获取我的汇豆记录列表
            getBeanRecordList(){
                var params = {
                    type: this.currentType,
                    page: this.page,
                    pageSize: this.pageSize
                };
                axiosRequest.get('/api/user/beanList', {params:params}).then(function (response) {
                    if (response.code == 200) {
                        if (response.data) {
                            response.data.forEach(function (item) {
                                vm.$data.beanList.push(item);
                            });
                            vm.$data.loading = false;
                            vm.$data.page += 1;

                            if (response.data.length < vm.$data.pageSize) {
                                vm.$data.finished = true;
                                vm.$data.loading = false;
                            }
                        } else {
                            vant.Toast('没有更多啦！');
                            vm.$data.finished = true;
                            vm.$data.loading = false;
                        }
                    } else {
                        vant.Toast('系统开小差啦！');
                    }
                });
            }


        }
    });




</script>







{include file="common/foot-bottom" /}
